<template>
  <div class="container">
    <div class="swiper-container banner">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item,index) in banners"
          :key="index"
          @click="goLink(item.url)"
        >
          <img :src="item.default_img" alt />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  data() {
    return {
      banners: [],
      list: [],
      loading: false,
      finished: false,
      page: 1,
      limit: 100,
      cate_id: 1
    };
  },
  mounted() {
    this.initSwiper();
  },
  created() {},

  methods: {
    initSwiper() {
      this.$api.article_list(this.cate_id, this.page, this.limit)
      .then(res => {
        console.log(res);
        this.banners = res.data.data;
        if (this.banners.length > 3) {
          this.banners = this.banners.splice(0, 3);
        }
        if (this.banners.length > 1) {
          setTimeout(() => {
            let swiper = new Swiper(".banner", {
              autoplay: 3000,
              direction: "horizontal",
              loop: true,
              //手动触发后继续播放
              autoplayDisableOnInteraction: false,
              // 如果需要分页器
              pagination: ".swiper-pagination",
              paginationElement: "span",
              paginationClickable: true
            });
          }, 800);
        }
      });
    },
    goLink(url) {
      window.location.href = url;
    },
    goSw() {
      this.$router.push({
        path: "/sw"
      });
    },
    getNewsList() {
      this.$api.article_list(this.cate_id, this.page, this.limit).then(res => {
        this.loading = false;
        console.log(res);
        if (this.page == 1) {
          this.list = res.data.data;
        } else {
          this.list = [...this.list, res.data.data];
        }

        if (res.data.data.length >= this.limit) {
          this.page = this.page + 1;
        }
        if (res.data.data.length < this.limit) {
          this.finished = true;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  .swiper-container {
    // width: 100%;
    height: 220px;
  }
  .banner {
    // width: 100%;
    display: block;
    border-radius: 6px;
    margin: 10px;
    height: 220px;
    overflow: hidden;
    .swiper-slide img {
      // width: 100%;
      height: auto;
      display: block;
      border: 0 none;
      outline: 0 none;
    }
    /deep/ .swiper-pagination-bullet {
      background: gray;
      opacity: 0.7;
    }

    /deep/ .swiper-pagination-bullet-active {
      background: #fff;
      opacity: 1;
      // width: 20px !important;
      // border-radius: 5px;
    }
    /deep/ .swiper-pagination {
      text-align: right;
    }
  }
}
</style>

